{% extends '@WebProfiler/Profiler/layout.html.twig' %}

{% block head %}
    {{ parent() }}
    <style>
        .sql-runnable code pre:not(:last-child) {
            margin-bottom: 1em;
        }
    </style>
{% endblock %}

{% block toolbar %}
    {% set profiler_markup_version = profiler_markup_version|default(1) %}

    {% set icon %}
        {% if profiler_markup_version == 1 %}
            <img alt="elastica" src="" />
            <span class="sf-toolbar-status">{{ collector.querycount }}</span>
            {% if collector.querycount > 0 %}
                <span class="sf-toolbar-info-piece-additional-detail">in {{ '%0.2f'|format(collector.time) }} ms</span>
            {% endif %}
        {% else %}
            {{ include('@FOSElastica/Collector/icon.svg') }}
            <span class="sf-toolbar-value">{{ collector.querycount }}</span>
            {% if collector.querycount > 0 %}
                <span class="sf-toolbar-info-piece-additional-detail">
                    <span class="sf-toolbar-label">in</span>
                    <span class="sf-toolbar-value">{{ '%0.2f'|format(collector.time) }}</span>
                    <span class="sf-toolbar-label">ms</span>
                </span>
            {% endif %}
        {% endif %}
    {% endset %}
    {% set text %}
        <div class="sf-toolbar-info-piece">
            <b>Queries</b>
            <span class="sf-toolbar-status">{{ collector.querycount }}</span>
        </div>
        <div class="sf-toolbar-info-piece">
            <b>Query Time</b>
            <span>{{ '%0.2f'|format(collector.time) }} ms</span>
        </div>
        <div class="sf-toolbar-info-piece">
            <b>Execution Time</b>
            <span>{{ '%0.2f'|format(collector.executionTime) }} ms</span>
        </div>
    {% endset %}
    {% include '@WebProfiler/Profiler/toolbar_item.html.twig' with { 'link': profiler_url } %}
{% endblock %}

{% block menu %}
    {% set profiler_markup_version = profiler_markup_version|default(1) %}

    <span class="label {{ collector.querycount ? '' : 'disabled' }}">
        {% if profiler_markup_version == 1 %}
            <span class="icon"><img src="" alt="" /></span>
        {% else %}
            <span class="icon">{{ include('@FOSElastica/Collector/icon.svg') }}</span>
        {% endif %}
        <strong>Elastica</strong>
    </span>
{% endblock %}

{% block panel %}
    <h2>Query Metrics</h2>

    <div class="metrics">
        <div class="metric">
            <span class="value">{{ collector.querycount }}</span>
            <span class="label">Database Queries</span>
        </div>
        <div class="metric">
            <span class="value">{{ '%0.2f'|format(collector.executionTime) }} <span class="unit">ms</span></span>
            <span class="label">Execution Time</span>
        </div>
        <div class="metric">
            <span class="value">{{ '%0.2f'|format(collector.time) }} <span class="unit">ms</span></span>
            <span class="label">Query Time</span>
        </div>
    </div>

    <h2>Queries</h2>

    {% if not collector.querycount %}
        <div class="empty">
            <p>No queries were performed.</p>
        </div>
    {% else %}

        <table class="alt queries-table">
            <thead>
            <tr>
                <th class="nowrap" onclick="javascript:sortTable(this, 0, 'queries')" data-sort-direction="-1" style="cursor: pointer;">#<span class="text-muted">&#9650;</span></th>
                <th class="nowrap" onclick="javascript:sortTable(this, 1, 'queries')" style="cursor: pointer;">Execution Time<span></span></th>
                <th class="nowrap" onclick="javascript:sortTable(this, 2, 'queries')" style="cursor: pointer;">Query Time<span></span></th>
                <th style="width: 100%">Info</th>
            </tr>
            </thead>
            <tbody id="queries">
            {% for key, query in collector.queries %}
                <tr id="queryNo-{{ key }}">
                    <td class="nowrap">{{ loop.index }}</td>
                    <td class="nowrap">{{ '%0.2f'|format(query.executionMS) }}&nbsp;ms</td>
                    <td class="nowrap">{{ '%0.2f'|format(query.engineMS) }}&nbsp;ms</td>
                    <td>
                        <div>
                            {% for data in query.data %}
                                <pre>{{ data|json_encode }}</pre>
                            {% endfor %}
                        </div>
                        <div class="font-normal text-small">
                            <strong>Path</strong>: {{ query.path }}<br />
                            <strong>Query</strong>: {{ query.queryString|url_encode }}<br />
                            <strong>Method</strong>: {{ query.method }} ({{ query.connection.transport }} on {{ query.connection.host }}:{{ query.connection.port }})<br />
                            <strong>Item count</strong>: {{ query.itemCount }}<br />

                            <a href="#" class="sf-toggle link-inverse" data-toggle-selector="#formatted-query-{{ key }}" data-toggle-alt-content="Hide formatted query">View formatted query</a>

                            {% if query.connection.transport in ['Http', 'Https'] %}{# cURL support only HTTP #}
                                &nbsp;
                                <a href="#" class="sf-toggle link-inverse" data-toggle-selector="#elastica-curl-query-{{ key }}" data-toggle-alt-content="Hide cURL query">View cURL query</a>
                            {% endif %}
                            {% if query.backtrace is defined %}
                                &nbsp;
                                <a href="#" class="sf-toggle link-inverse" data-toggle-selector="#elastica-query-backtrace-{{ key }}" data-toggle-alt-content="Hide query backtrace">View query backtrace</a>
                            {% endif %}
                        </div>

                        <div id="formatted-query-{{ key }}" class="sql-runnable hidden">
                            <code>
                            {% for data in query.data %}
                                <pre>{{ data|json_encode(constant('JSON_PRETTY_PRINT')) }}</pre>
                            {% endfor %}
                            </code>
                        </div>

                        {% if query.connection.transport in ['Http', 'Https'] %}{# cURL support only HTTP #}
                            <div id="elastica-curl-query-{{ key }}" class="sql-runnable hidden">
                                {% if query.data|length == 1 %}
                                    {% set dataFlag = '-d' %}
                                    {% set curlData = query.data[0]|json_encode %}
                                {% else %}
                                    {% set dataFlag = '--data-binary' %}
                                    {% set curlData = '' %}
                                    {% for data in query.data %}
                                        {% set curlData = curlData ~ data|json_encode ~ "\n" %}
                                    {% endfor %}
                                {% endif %}
                                <code>curl -X{{ query.method }} '{{ query.connection.transport|lower }}://{{ query.connection.host }}:{{ query.connection.port }}/{{ query.path }}{% if query.queryString|length %}?{{ query.queryString|url_encode }}{% endif %}' -H 'Content-Type: application/json' {{ dataFlag }} '{{ curlData|nl2br }}'</code>
                            </div>
                        {% endif %}
                        {% if query.backtrace is defined %}
                            <div id="elastica-query-backtrace-{{ key }}" class="sql-runnable hidden">
                                <code><pre>{{ query.backtrace }}</pre></code>
                            </div>
                        {% endif %}
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>

        <script>//<![CDATA[
            function sortTable(header, column) {
                "use strict";

                var direction = parseInt(header.getAttribute('data-sort-direction')) || 1,
                    items = [],
                    target = document.getElementById('queries'),
                    rows = target.children,
                    headers = header.parentElement.children,
                    i;

                for (i = 0; i < rows.length; ++i) {
                    items.push(rows[i]);
                }

                for (i = 0; i < headers.length; ++i) {
                    headers[i].removeAttribute('data-sort-direction');
                    if (headers[i].children.length > 0) {
                        headers[i].children[0].innerHTML = '';
                    }
                }

                header.setAttribute('data-sort-direction', (-1*direction).toString());
                header.children[0].innerHTML = direction > 0 ? '<span class="text-muted">&#9650;</span>' : '<span class="text-muted">&#9660;</span>';

                items.sort(function(a, b) {
                    return direction * (parseFloat(a.children[column].innerHTML) - parseFloat(b.children[column].innerHTML));
                });

                for (i = 0; i < items.length; ++i) {
                    Sfjs.removeClass(items[i], i % 2 ? 'even' : 'odd');
                    Sfjs.addClass(items[i], i % 2 ? 'odd' : 'even');
                    target.appendChild(items[i]);
                }
            }
        </script>
    {% endif %}
{% endblock %}
